<template>
	<!-- 日历滚动条 -->
	<view style="background-color: white;padding-bottom: 5px;">
		<view style="width: 100%;display: flex;justify-content: center;padding: 5px;">
			<text style="font-weight: bold;">{{$dayjs(currentDate).format('YYYY年MM月DD日')}}</text>
		</view>
		<scroll-view scroll-x="true" style="white-space: nowrap;width: 100%;" >
			<view style="display: flex;">
				<view @click="onClickDay(i,$dayjs().add(i,'day').format('YYYY-MM-DD'))" v-for="(item,i) in showNumber" style="flex:1;border-radius: 5px;;margin: 4px 10px;padding: 4px 10px;" :style="{backgroundColor:currentDayIndexSel == i?'red':'transparent'}">
					<view style="display: flex;flex-direction:column;justify-content: center;align-items: center;">
						<view style=";font-size: 12px;color: #fff;" :style="{color:currentDayIndexSel == i?'#fff':'#000'}">
							{{['一','二','三','四','五','六','日'][$dayjs().add(i,'day').isoWeekday() - 1]}}
						</view>
						<view style="font-size: 16px;color: #fff;padding: 6px 0;font-weight: bold;" 
							:style="{color:currentDayIndexSel == i?'#fff':'#000',}">
							{{i==0?'今天': (i==1?'明天': $dayjs().add(i,'day').date() + '日')}}
						</view>
						<view style="font-size: 12px;color: #fff;" 
							:style="{color:currentDayIndexSel == i?'#fff':'#c3c3c3'}">
							<slot name="text" :index="i" />
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- <view style="margin: 5px 10px;
		padding:5px;
		border-radius: 5px 0 0 5px;
		background-image: linear-gradient(90deg,rgb(240 240 240), rgba(255, 255, 255, 0));
		">
			<view>
				<text style="color: #000;">2023</text>
				<text style="color: #777;">年</text>
				<text style="color: #000;">6</text>
				<text style="color: #777;">月</text>
				<text style="color: #000;">22</text>
				<text style="color: #777;margin-right: 5px;">日</text>
				<text style="color: #777;">周</text>
				<text style="color: #777;">四</text>
				<text style="color: #777;margin-left: 5px;">{{'更新于:'}}{{$dayjs().format('hh:mm')}}</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		name:"job-calendar",
		props:{
			showNumber:{
				type:Number,
				default:10
			},
			date:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				currentDayIndexSel:0,
				currentDate: this.$dayjs().format('YYYY-MM-DD')
			};
		},
		watch:{
			date:{
				handler(val){
					console.log(val)
					this.getIndexByDate(val)
				},
				immediate:true
			}
		},
		methods:{
			getIndexByDate(date)
			{
				let index = this.$dayjs(date).diff(this.$dayjs().startOf('day'),'day');
				if(index >=0 && index < this.showNumber) this.currentDayIndexSel = index,this.currentDate = date
				
				console.log(index)
			},
			onClickDay(i,date){
				this.currentDayIndexSel = i
				this.currentDate = date
				this.$emit('change',i,date)
			}
		}
	}
</script>

<style>

</style>